<div class="navigation-progress" id="navigation-progress"></div>
<% if Settings::UserExperience.accent_background_color_hex.present? && Settings::UserExperience.accent_background_color_hex != "#ffffff" %>
  <style>
    body:not(.dark-theme) #topbar {background: <%= Settings::UserExperience.accent_background_color_hex%> }
    body:not(.dark-theme) #topbar .c-link, body:not(.dark-theme) #topbar .c-cta, body:not(.dark-theme) #topbar .c-btn {color: white !important; border-color: white !important}
    body:not(.dark-theme) #topbar .crayons-header--search .c-btn { color: <%= Settings::UserExperience.accent_background_color_hex%> !important; }
    body:not(.dark-theme) #topbar .c-link[aria-current='page'], body:not(.dark-theme) #topbar .c-link.c-link--current { background-color: rgba(255,255,255,0.1) !important; }
    body:not(.dark-theme) #topbar .crayons-dropdown .c-link { color: #333 !important; }
    </style>
<% end %>

<header id="topbar" class="crayons-header topbar print-hidden">
  <span id="route-change-target" tabindex="-1"></span>
  <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
  <div class="crayons-header__container">
    <span class="inline-block m:hidden ">
      <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
        <%= crayons_icon_tag(:hamburger, title: t("views.hamburger.icon")) %>
      </button>
    </span>
    <%= render "layouts/logo" %>

    <div class="crayons-header--search js-search-form" id="header-search">
      <form accept-charset="UTF-8" method="get" action="<%= search_path %>" role="search">
        <div class="crayons-fields crayons-fields--horizontal">
          <div class="crayons-field flex-1 relative">
            <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="<%= @article.present? ? t("views.search.find_related_posts") : t("views.search.placeholder") %>" autocomplete="off" />
            <button type="submit" aria-label="<%= t("views.search.icon.aria_label") %>" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0">
              <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
            </button>

            <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer">
              <% if Settings::General.display_algolia_branding %>
                <%= t("views.search.powered_by") %>
                <%= crayons_icon_tag(:algolia, aria_hidden: true, title: t("views.search.icon.title")) %>
              <% end %>
            </a>
          </div>
        </div>
      </form>
    </div>

    <div class="flex items-center h-100 ml-auto">
      <% if user_signed_in? %>
        <a class="c-link c-link--icon-alone c-link--block m:hidden <% unless user_signed_in? %>mx-1<% end %>" id="search-link" aria-label="<%= t("views.search.icon.aria_label") %>" href="<%= search_path %>">
          <%= crayons_icon_tag(:search, title: t("views.search.icon.title")) %>
        </a>
        <span class="hidden m:flex ml-auto">
          <% if ArticlePolicy.is_root_subforem? %>
            <button 
              class="c-cta c-cta--branded mr-2 whitespace-nowrap" 
              onclick="window.openSubforemModal()">
              <%= t("views.main.create_post") %>
            </button>
          <% else %>
            <%= application_policy_content_tag("a", record: Article, query: :create?, href: new_path, class: "c-cta c-cta--branded mr-2 whitespace-nowrap") do %>
              <%= t("views.main.create_post") %>
            <% end %>
          <% end %>

          <span class="trusted-visible-block">
            <a id="moderation-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.moderation.aria_label") %>" href="<%= mod_path %>">
              <%= crayons_icon_tag(:mod, title: t("views.main.header.moderation.icon")) %>
            </a>
          </span>
          <style>
            .subforem-moderator-visible-block {
                display: none !important;
            }
            body.subforem-moderator-status-true .subforem-moderator-visible-block {
              display: block !important;
            }
          </style>
          <span class="subforem-moderator-visible-block">
            <a id="manage-subforem-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.manage.aria_label") %>" href="<%= manage_subforem_path %>">
              <%= crayons_icon_tag(:"tools-line", title: t("views.main.header.manage.icon")) %>
            </a>
          </span>
        </span>

        <a href="<%= notifications_path %>" id="notifications-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.notifications.aria_label") %>">
          <%= crayons_icon_tag(:bell, title: t("views.main.header.notifications.icon")) %>
          <span class="c-indicator c-indicator--danger hidden" id="notifications-number"></span>
        </a>

        <div class="crayons-header__menu mx-1" id="crayons-header__menu">
          <button type="button" class="c-btn c-btn--icon-alone radius-full p-1" id="member-menu-button" aria-label="<%= t("views.main.header.nav.aria_label") %>" aria-expanded="false">
            <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
          </button>
          <%= render "layouts/nav_menu" %>
        </div>
      <% else %>
        <div class="flex" id="authentication-top-nav-actions">
          <span class="hidden m:block">
            <a href="<%= subforem_aware_sign_up_url(sign_up_path(signup_subforem: RequestStore.store[:subforem_id])) %>" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
              <%= t("views.main.header.login") %>
            </a>
          </span>

          <a href="<%= subforem_aware_sign_up_url(sign_up_path(state: "new-user", signup_subforem: RequestStore.store[:subforem_id])) %>" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
            <%= t("views.main.header.create_account") %>
          </a>
        </div>
      <% end %>
    </div>
  </div>
  <% if user_signed_in? %>
    <script>
      // Here we have some scripts we want to get working on before
      // waiting for the page to stream in.

      // Load the current user's pic as quickly as it's available
      var currentUser = localStorage.getItem('current_user')
      var navProfilePic = document.getElementById('nav-profile-image')
      if (currentUser && navProfilePic) {
        navProfilePic.src = JSON.parse(currentUser).profile_image_90;
      }

      // Load notifications count as quickly as it's available.
      // Not if we're on the notifications page itself
      if (
        window.location.pathname !== '/notifications'
      ) {
        var xmlhttp;

        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            var count = xmlhttp.response;
            if (isNaN(count)) {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
                if (window && window.ReactNativeWebView) {
                  window.ReactNativeWebView.postMessage(JSON.stringify({ action: "update_notification_count", count: 0 }));
                }
            } else if (count != '0' && count != undefined && count != '') {
              var displayCount = parseInt(count) > 50 ? '50+' : count;
              document.getElementById('notifications-number').innerHTML = displayCount;
              document
                .getElementById('notifications-number')
                .classList.remove('hidden');
                if (window && window.ReactNativeWebView) {
                  window.ReactNativeWebView.postMessage(JSON.stringify({ action: "update_notification_count", count: count }));
                }
            } else {
              document
                .getElementById('notifications-number')
                .classList.add('hidden');
              if (window && window.ReactNativeWebView) {
                window.ReactNativeWebView.postMessage(JSON.stringify({ action: "update_notification_count", count: 0 }));
              }

            }
          }
        };

        xmlhttp.open('GET', '/notifications/counts', true);
        xmlhttp.send();
      }
    </script>
  <% end %>
</header>

<%= render "shared/hamburger" %>
